<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath()+'/'}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>-登录页</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/utils.js"></script>
    <script src="/static/js/md5.js"></script>
    <style>
        body {
            background: url('/static/imgs/login.jpg') no-repeat 0 0;
            background-size: 100% 130%;
        }

        #login_box {
            width: 20%;
            height: 400px;
            background-color: #00000060;
            margin: 10% auto auto;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }

        h2 {
            color: #ffffff90;
            margin-top: 5%;
        }

        span {
            color: #fff;
        }

        input {
            border: 0;
            width: 60%;
            font-size: 15px;
            color: #fff;
            background: transparent;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            outline: none;
            margin-top: 10px;
        }

        #input-login {
            margin-top: 50px;
            width: 60%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            text-align: center;
            line-height: 30px;
            font-size: 15px;
            background-image: linear-gradient(to right, #30cfd0, #330867);
        }

        a {
            color: #b94648;
        }
    </style>
</head>
<body>
<div id="login_box">
    <h2>LOGIN</h2>
    <div id="input_box">
        <label>
            <input type="text" placeholder="请输入手机号" name="tel" value="13526549539">
        </label>
    </div>
    <div class="input_box">
        <label>
            <input type="password" placeholder="请输入密码" name="pwd" value="123qwe456">
        </label>
    </div>
    <input id="input-login" type="button" value="登录" onclick="login()">
    <br>
    <script>
        function login() {
            let tel = $("[name=\"tel\"]").val();
            let pwd = $("[name=\"pwd\"]").val();
            pwd = salt.charAt(0) + salt.charAt(1) + pwd + salt.charAt(4) + salt.charAt(5);
            pwd = hex_md5(pwd);
            $.ajax({
                type: "post",//指定客户端向服务器端发送数据的方式
                url: "/doLogin",//向服务器请求的地址
                data: {//向服务器发送的数据
                    'pwd': pwd,
                    'tel': tel
                },
                async: true,//是否位同步,true(默认值):异步false:同步
                success: function (responseBean) {//服务器成功给予客户端响应的数据 out.print();
                    if (responseBean.code == 200) {
                        window.location = "/toIndex?userTicket=" + responseBean.object;
                    } else {
                        alert(responseBean.message)
                    }
                }
            });

        }
    </script>
    <h2 th:if="${#request.getParameter('num') != null and #request.getParameter('num').equals('1')}" style="color: red"
        th:text="手机号或密码错误"></h2>
</div>
</body>
</html>
